<!DOCTYPE html>
<html>
<head>
    <title> 树表</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <link rel="stylesheet" href="../../resources/css/plugins/ztree/metroStyle/metroStyle.css" type="text/css">
    <script type="text/javascript" src="../../resources/js/jquery-2.1.1.js"></script>
    <script type="text/javascript" src="../../resources/js/plugins/ztree/jquery.ztree.all-3.5.min.js"></script>
    <script type="text/javascript">
        var setting = {
            view: {
                addHoverDom: addHoverDom,
                removeHoverDom: removeHoverDom,
                selectedMulti: false
            },
            check: {
                enable: true
            },
            data: {
                simpleData: {
                    enable: true
                }
            },
            edit: {
                enable: true,
                showRemoveBtn: setRemoveBtn,
                showRenameBtn: setRenameBtn
            },
            callback: {
                onClick: zTreeOnClick
            }
        };
        function zTreeOnClick(event, treeId, treeNode) {
            var cont=treeNode.src;
            $('iframe').attr('src',cont)
        };
        function setRemoveBtn(treeId, treeNode) {
            return !treeNode.isParent;
        }
        function setRenameBtn(treeId, treeNode) {
            return !treeNode.isParent;
        }
        var zNodes =[
            { id:1, pId:0, name:"客户管理", open:true,src:'../bootstrap-table-develop/demo.html'},
            { id:11, pId:1, name:"客户分类",src:'../bootstrap-table-develop/bootstrapTab.html'},
            { id:111, pId:11, name:"正全科技有限公司",src:'../bootstrap-fileinput/fileinput.html'},
            { id:112, pId:11, name:"食潮科技有限公司",src:'../dialog/dialog.html'},
            { id:113, pId:11, name:"力挚网络科技有限公司",src:'../bootstrap-fileinput/fileinput.html'},
            { id:114, pId:11, name:"百度网络科技有限公司",src:'../bootstrap-table-develop/bootstrapTab.html'},
            { id:12, pId:1, name:"客户跟进",src:'../bootstrap-table-develop/demo.html'},
            { id:121, pId:12, name:"未完成",src:'../bootstrap-fileinput/fileinput.html'},
            { id:122, pId:12, name:"跟进中",src:'../bootstrap-table-develop/bootstrapTab.html'},
            { id:123, pId:12, name:"已建成"},
            { id:124, pId:12, name:"阿萨德"},
            { id:13, pId:1, name:"客户信息", isParent:true,src:'../dialog/dialog.html'},
            { id:2, pId:0, name:"团队管理"},
            { id:21, pId:2, name:"设计部"},
            { id:211, pId:21, name:"部门预算"},
            { id:212, pId:21, name:"部门人数"},
            { id:213, pId:21, name:"部门信息"},
            { id:214, pId:21, name:"项目分配"},
            { id:22, pId:2, name:"产品部"},
            { id:221, pId:22, name:"部门预算"},
            { id:222, pId:22, name:"部门人数"},
            { id:223, pId:22, name:"部门信息"},
            { id:224, pId:22, name:"项目分配"},
            { id:23, pId:2, name:"市场部"},
            { id:231, pId:23, name:"部门预算"},
            { id:232, pId:23, name:"部门人数"},
            { id:233, pId:23, name:"部门信息"},
            { id:234, pId:23, name:"项目分配"},
            { id:3, pId:0, name:"项目管理", isParent:true,src:'../bootstrap-table-develop/bootstrapTab.html'},
            { id:4, pId:0, name:"项目管理", isParent:true},
            { id:5, pId:0, name:"项目管理", isParent:true},
            { id:6, pId:0, name:"项目管理", isParent:true},
            { id:7, pId:0, name:"项目管理", isParent:true},
            { id:8, pId:0, name:"项目管理", isParent:true},
            { id:9, pId:0, name:"项目管理", isParent:true},
            { id:10, pId:0, name:"项目管理", isParent:true}
        ];

        $(document).ready(function(){
            $.fn.zTree.init($("#treeDemo"), setting, zNodes);
        });

        var newCount = 1;
        function addHoverDom(treeId, treeNode) {
            var sObj = $("#" + treeNode.tId + "_span");
            if (treeNode.editNameFlag || $("#addBtn_"+treeNode.tId).length>0) return;
            var addStr = "<span class='button add' id='addBtn_" + treeNode.tId
                + "' title='add node' onfocus='this.blur();'></span>";
            sObj.after(addStr);
            var btn = $("#addBtn_"+treeNode.tId);
            if (btn) btn.bind("click", function(){
                var zTree = $.fn.zTree.getZTreeObj("treeDemo");
                zTree.addNodes(treeNode, {id:(100 + newCount), pId:treeNode.id, name:"new node" + (newCount++)});
                return false;
            });
        };
        function removeHoverDom(treeId, treeNode) {
            $("#addBtn_"+treeNode.tId).unbind().remove();
        };
    </script>
</head>

<body>
<div class="content_wrap">
    <div class="zTreeDemoBackground left">
        <ul id="treeDemo" class="ztree"></ul>
    </div>
</div>
<iframe src="../bootstrap-table-develop/demo.html" frameborder="1"></iframe>
</body>
</html>